<!--
	作者：956911785@qq.com
	时间：2018-10-16
	描述：顶部
-->
<template>
	<div class="layout">
		<Menu mode="horizontal" theme="dark" active-key="1" style="background:#375473;height:90px;line-height:90px;">
			<div class="layout-logo">
				<a style="color:#fff;cursor: pointer;" @click="openeditSys" >{{user.SYSTEMNAME}}</a>
			</div>
			<div class="layout-nav">

				<MenuItem name="1" style="color:#fff;width:120px;padding:0px;margin-left:20px;">
					<router-link to="/home" tag="div" class="out_head_div" >
						<div class="icon_around_div" style="background:#ff7c67;">
							<Icon type="md-home" style="font-size:25px;line-height:44px;" />
						</div>
						<span class="span_title">首页</span>
					</router-link>
				</MenuItem>
			
				<MenuItem name="2" style="color:#fff;width:120px;padding:0px;">
					<router-link to="/jcsz" tag="div" class="out_head_div" >
						<div class="icon_around_div" style="background:#53c7ce;">
							<Icon type="ios-settings" style="font-size:25px;line-height:44px;" />
						</div>
						<span class="span_title">基础设置</span>
					</router-link>
				</MenuItem>
				
				<MenuItem name="3" style="color:#fff;width:120px;padding:0px;">
					<router-link to="/fdb" tag="div" class="out_head_div" >
						<div class="icon_around_div" style="background:#8E8E38;">
							<Icon type="md-git-network" style="font-size:25px;line-height:44px;" />
						</div>
						<span class="span_title">辅导班</span>
					</router-link>
				</MenuItem>
	
	
				<MenuItem name="6" style="color:#fff;width:120px;padding:0px;">
					<router-link to="/qtbm" tag="div" class="out_head_div" >
						<div class="icon_around_div" style="background:#708090;">
							<Icon type="ios-nuclear" style="font-size:25px;line-height:44px;"></Icon>
						</div>
						<span class="span_title">其它报名</span>
					</router-link>
				</MenuItem>

				<MenuItem name="4" style="color:#fff;width:120px;padding:0px;">
					<router-link to="/bmqk" tag="div" class="out_head_div" >
						<div class="icon_around_div" style="background:#f54e91;">
							<Icon type="ios-color-filter" style="font-size:25px;line-height:44px;"></Icon>
						</div>
						<span class="span_title">报名情况</span>
					</router-link>
				</MenuItem>
				
				<MenuItem name="5" style="color:#fff;width:120px;padding:0px;">
					<router-link to="/jffs" tag="div" class="out_head_div" >
						<div class="icon_around_div" style="background:#9999FF;">
							<Icon type="md-ionitron" style="font-size:25px;line-height:44px;"></Icon>
						</div>
						<span class="span_title">缴费方式</span>
					</router-link>
				</MenuItem>
			</div>

			<div style="float:right;color:#FFFFFF;padding-right: 10px;">
				<Icon type="md-menu" style="font-size:25px;line-height: 90px;float: left;" />
				<span style="float: left;">{{user.CSNAME}}（{{user.UNAME}}）</span>
				<a style="color:#FFA07A;" @click="openEditZhMm()">
					<Icon type="md-create" style="font-size:25px;line-height: 90px;float: left;" />
					<span style="float: left;">修改账户或密码</span>
				</a>
				<div style="float: left;width: 64px; height: 64px; border-radius: 50%; border: 3px solid #eee; overflow: hidden;margin-top:5%;">
					<img src="../../../../static/user.jpg" style="width: 64px; height:64px;" />
				</div>
			</div>
		</Menu>
		<UaccountEdit ref="UaccountEdit" :usrs="usrs"></UaccountEdit>
		<SystemEdit ref="SystemEdit" :csid="user.CSID" @setSystemName="setSystemName"></SystemEdit>
	</div>
</template>
<script>
	import UaccountEdit from "./UaccountEdit";
	import SystemEdit from "./SystemEdit";
	export default {
		name: "tdhead",
		data() {
			return {
				items: "",
				usrs:{
					uname:'',
					upwd:''
				}
			}
		},
		methods: {
			openEditZhMm(){
				this.usrs.uname=this.user.UNAME;
				this.usrs.upwd=this.user.UPWD;
				this.$refs.UaccountEdit.modal0 = true;
			},
			setSystemName(systemname){
				this.user.SYSTEMNAME=systemname;
			},
			openeditSys(){	
				this.$refs.SystemEdit.modal0 = true;
			}
		},
		computed: {
			user: function() {
				return this.$store.state.app.user;
			}
		},
		mounted(){	
			this.$store.dispatch("getUser");
		},
		components: {
			UaccountEdit,
			SystemEdit
		},
	}
</script>

<style scoped="scoped">
	.layout {
		border: 1px solid #d7dde4;
		background: #f5f7f9;
	}
	
	.layout-logo {
		float: left;
		position: relative;
		color: #fff;
		font-size: 24px;
		padding-left: 10px;
	}
	
	.layout-nav {
		margin: 0 auto;
		color: #fff;
	}
	
	.layout-assistant {
		width: 300px;
		margin: 0 auto;
		height: inherit;
	}
	
	.layout-breadcrumb {
		padding: 10px 15px 0;
	}
	
	.layout-content {
		min-height: 200px;
		margin: 15px;
		overflow: hidden;
		background: #fff;
		border-radius: 4px;
	}
	
	.layout-content-main {
		padding: 10px;
	}
	
	.layout-copy {
		text-align: center;
		padding: 10px 0 20px;
		color: #9ea7b4;
	}
	
	.ivu-menu-item {
		color: #fff;
	}
	
	.out_head_div {
		width: 120px;
		height: 90px;
		overflow: hidden;
	}
	
	.active {
		width: 120px;
		height: 90px;
		overflow: hidden;
		background: #2e4561;
		color: #eaff00;
	}
	
	.icon_around_div {
		width: 44px;
		height: 44px;
		border-radius: 50%;
		line-height: 44px;
		margin: 0px auto;
		margin-top: 15px;
		text-align:center;
		color:#fff;
	}
	
	.span_title {
		width: 120px;
		height: 20px;
		line-height: 20px;
		float: left;
		text-align: center;
		font-size: 14px;
		margin-top: 5px;
	}

</style>